<!--
 * @Author: shenya
 * @Date: 2023-09-09 17:00:00
 * @Description: 灌水账号评论
-->
<template>
  <el-dialog
    title="灌水账号评论"
    :visible.sync="visible"
    width="60%"
    append-to-body
  >
    <avue-crud
      ref="crud"
      v-model="form"
      :option="accountOption"
      :data="data"
      @row-save="rowSave"
      @row-update="addUpdate"
    >
      <!-- <template #userName-form="{ row }">
        <div>11111111111</div>
        <el-input
          v-model="row.userName"
          :disabled="row.$index == 1"
        ></el-input>
      </template> -->
      <template #menu="{ row }">
        <el-button
          type="text"
          @click="selectUser(row, row.$index)"
        >
          选择用户
        </el-button>
        <el-button
          v-if="row.$index !== 0"
          type="text"
          @click="deleteRow(row, row.$index)"
        >
          删除行
        </el-button>
      </template>
    </avue-crud>
    <template #footer>
      <el-button
        type="primary"
        :loading="loading"
        @click="submitComment"
      >
        提交批量评论
      </el-button>
      <el-button @click="visible = false">取消</el-button>
    </template>
    <like-dialog
      v-model="likeVisible"
      :action="action"
      :chose-list="choseList"
      @selectUser="select"
    ></like-dialog>
  </el-dialog>
</template>
<script>
import { accountOption } from '@/const/crud/community-content/user';
import likeDialog from './likeDialog.vue';
import { changeComment } from '@/api/core/dynamic';
import { LIKEORCOMMENT } from '@/const/type';
export default {
  components: { likeDialog },
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    id: {
      type: String,
    },
    relativeType: {
      type: String,
    },
  },
  data() {
    return {
      likeVisible: false,
      updateObj: {},
      form: {},
      action: '',
      LIKEORCOMMENT,
      arr: [],
      index: '',
      data: [
        {
          id: 0,
          $cellEdit: true,
          commentContent: '',
          userIds: [],
          userName: '',
        },
      ],
      loading: false,
      accountOption: accountOption(),
      choseList: [],
    };
  },
  computed: {
    visible: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      },
    },
  },
  watch: {
    visible(val) {
      this.choseList = [];
      if (!val) {
        this.data = [
          {
            id: 0,
            $cellEdit: true,
            commentContent: '',
            userIds: [],
            userName: '',
          },
        ];
      }
    },
  },
  methods: {
    select(arr) {
      const name = arr.map((item) => item.nickname).join(',');
      this.data[this.index].userName = name;
      this.data[this.index].userIds = arr.map((item) => Number(item.userId));
      this.data[this.index].temp = arr;
      console.log(' this.data[this.index].temp', this.data[this.index].temp);
      this.choseList = arr;
    },
    rowSave(form, done) {
      console.log('新增form', form);
      this.$message.success('新增数据' + JSON.stringify(form));
      done();
    },
    //删除行
    deleteRow(row, index) {
      console.log('row', row);
      this.data.splice(index, 1);
    },
    //选择用户
    selectUser(row, index) {
      console.log('rrr', row);
      this.index = index;
      this.action = 'comment';
      this.likeVisible = true;
      this.choseList = row.temp;
    },
    addUpdate(form, index, done, loading) {
      console.log('form', form);
      this.updateObj = form;
      done();
    },
    //新增行
    addNextRow(index) {
      this.data.push({ $cellEdit: true });
    },
    //提交评论
    submitComment() {
      this.$refs.crud.validateCellForm().then(async (err) => {
        if (err && JSON.stringify(err) !== '{}') {
          this.$message.warning('请选择灌水账号/请输入评论内容');
        } else {
          this.$confirm(
            '将使用已选灌水账号进行批量评论操作，确定进行批量评论吗？',
            '提示',
            {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
            }
          ).then(async () => {
            const result = this.data.map((item) => {
              return {
                msg: item.commentContent,
                creators: item.userIds,
              };
            });
            const params = {
              relativeId: Number(this.id),
              relativeType: this.relativeType,
              petCommentInfos: result,
            };

            changeComment(params).then(() => {
              this.$emit('success');
              this.visible = false;
            });
          });
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep {
  .el-table__fixed-right {
    height: 100% !important;
  }
  .el-table__fixed {
    height: 100% !important;
  }
}
</style>
